<template>
  <div class="app-container flow-edit-css" ref="refFlowEditForm">
    <div class="my-define-dialog-title">
      {{dialogTitle}}
      <div class="my-define-dialog-title-btn">
        <i @click="cancel(false)" class="saas-iconfont saas-icon-caozuo-quanping-shousuo"></i>
      </div>
    </div>
    <el-scrollbar :style="customeStyle" class="my-form-scrollbar">
      <el-row class="my-dialog-top-row">
        <el-form size="medium" ref="myForm" :model="form" :label-width="labelForm.labelWidth"
          :label-position="labelForm.labelPosition">
          <el-col :span="24">
            <el-form-item label="标题">
              <el-select style="width: 150px;" v-model="form.flowType" placeholder="请选择类型">
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <el-input style="width: calc(100% - 155px);" placeholder="请输入流程标题" v-model="form.flowName">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="选择关联数据表">
              <el-cascader style="width: 100%;" :options="sceneList"
                :props="{ value: 'id',emitPath: false,multiple: true }" v-model="form.relateSceneIdList"
                :show-all-levels="true"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="">
              <template slot="label">
                <div class="flow-edit-css1">
                  代码块
                  <div class="flow-edit-css2">
                    <el-dropdown trigger="click" @command="addTemplate">
                      <span class="el-dropdown-link">
                        模版示例<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-if="form.flowType==2" command="0">新增示例</el-dropdown-item>
                        <el-dropdown-item v-if="form.flowType==2" command="1">修改示例</el-dropdown-item>
                        <el-dropdown-item v-if="form.flowType==2" command="2">删除示例</el-dropdown-item>
                        <el-dropdown-item v-if="form.flowType==3" command="3">数据汇总示例</el-dropdown-item>
                        <el-dropdown-item v-if="form.flowType==1" command="4">新增示例</el-dropdown-item>
                        <el-dropdown-item v-if="form.flowType==1" command="5">修改示例</el-dropdown-item>
                        <el-dropdown-item v-if="form.flowType==1" command="6">删除示例</el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div>
              </template>
              <el-input class="blank-textarea" type="textarea" :autosize="{ minRows: 15, maxRows: 15}" :rows="15"
                placeholder="请输入内容" v-model="form.relateConditions">
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
  import defaultSettings from '@/settings'
  import {
    getScenes
  } from '@/api/system/scene'
  import {
    getFlow,
    saveFlow
  } from '@/api/system/flow'
  export default {
    name: 'flow-edit',
    props: {
      sceneType: {
        type: Number,
        default: 0
      },
      sceneId: {
        type: Number,
        default: 0
      },
      defineSceneId: {
        type: Number,
        default: 0
      },
      dialogTitle: {
        type: String,
        default: ''
      },
      relateId: {
        type: Number,
        default: 0
      },
      flowType: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        labelForm: defaultSettings.labelForm,
        customeStyle: {
          height: (window.innerHeight - 120) + 'px',
          background: "#f5f5f5",
        },
        sceneList: [],
        form: {
          Id: 0,
          flowName: '',
          flowType: 2,
          relateSceneIdList: [],
          relateSceneIds: '',
          relateConditions: ''
        },
        typeOptions: [{
          value: 1,
          label: '自动通知'
        }, {
          value: 2,
          label: '自动更新'
        }, {
          value: 3,
          label: '定时任务'
        }]
      }
    },
    created() {
      this.form.Id = this.relateId
      this.form.flowType = this.flowType
      this.getData();
    },
    methods: {
      getData() {
        if (this.form.Id) {
          getFlow({
            Id: this.form.Id
          }).then(res => {
            if (res.status) {
              this.form = res.outputData
            }
          })
        }
        this.getSceneList()
      },
      // 获取场景列表
      getSceneList() {
        if (this.sceneType) {
          getScenes({
            sceneType: 0
          }).then(res => {
            if (res.status) {
              this.sceneList = res.outputData.sceneList.filter((item) => {
                return item.visibility
              })
            }
          })
        }
      },
      submitRelate() {
        if (!this.form.flowName) {
          this.$message.warning('请输入流程标题')
          return
        }
        if (this.form.relateSceneIdList.length == 0) {
          this.$message.warning('请选择关联数据表')
          return
        }
        if (!this.form.relateConditions) {
          this.$message.warning('请输入代码块')
          return
        }
        this.form.relateSceneIds = JSON.stringify(this.form.relateSceneIdList)
        saveFlow(this.form).then(res => {
          if (res.status) {
            this.$message({
              message: this.form.Id > 0 ? '修改成功' : '新增成功',
              type: 'success'
            })
            this.cancel(true)
          }
        })
      },
      cancel(reload) {
        this.$$parent(this, "doClosePop", reload)
      },
      addTemplate(type) {
        if (!this.form.relateConditions)
          this.form.relateConditions = ''
        else
          this.form.relateConditions += '\n'
        if (type == 0) {
          var text = ''
          text += '#begin\n'
          text += 'case when\n'
          text += '[表名称1] inserted\n'
          text += 'then\n'
          text += 'insert into [表名称2] values ({字段1},{字段2}) from inserted\n'
          text += '#end\n'
          this.form.relateConditions += text
        }
        if (type == 1) {
          var text = ''
          text += '#begin\n'
          text += 'case when\n'
          text += '[表名称1] updated\n'
          text += 'then\n'
          text += 'update [表名称2] set {字段1},{字段2} from updated\n'
          text += '#end\n'
          this.form.relateConditions += text
        }
        if (type == 2) {
          var text = ''
          text += '#begin\n'
          text += 'case when\n'
          text += '[表名称1] deleted\n'
          text += 'then\n'
          text += 'delete [表名称2] from deleted\n'
          text += '#end\n'
          this.form.relateConditions += text
        }
        if (type == 3) {
          var text = ''
          text += '#begin\n'
          text += 'case when\n'
          text +=
            '{"type": "1","beginTime": "2023-01-01 00:00:00","endTime": "2024-01-01 00:00:00","intervalType": "second","intervalVal": "60"}\n'
          text += 'then\n'
          text += 'insert into [表名称2] ({字段1},{字段2})\n'
          text += 'select {添加日期(month)}, count(1) from [表名称1]\n'
          text += 'group by {添加日期(month)}\n'
          text += '#end\n'
          this.form.relateConditions += text
        }
        if (type == 4) {
          var text = ''
          text += '#begin\n'
          text += 'case when\n'
          text += '[表名称1] inserted\n'
          text += 'then\n'
          text += 'send to {张三}\n'
          text += '#end\n'
          this.form.relateConditions += text
        }
        if (type == 5) {
          var text = ''
          text += '#begin\n'
          text += 'case when\n'
          text += '[表名称1] updated,{字段1}=修改值1,{字段2}=修改值2\n'
          text += 'then\n'
          text += 'send to {张三}\n'
          text += '#end\n'
          this.form.relateConditions += text
        }
        if (type == 6) {
          var text = ''
          text += '#begin\n'
          text += 'case when\n'
          text += '[表名称1] deleted\n'
          text += 'then\n'
          text += 'send to {张三}\n'
          text += '#end\n'
          this.form.relateConditions += text
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .flow-edit-css {
    height: 100%;
    background-color: #f0f0f0;

    .el-form {
      height: calc(100% - 5px);
      overflow-y: auto;
      padding: 20px;
      background-color: #fff;
      overflow-x: hidden;
    }

    .flow-edit-css1 {
      position: relative;

      .flow-edit-css2 {
        position: absolute;
        top: 0;
        right: 5px;
      }
    }
  }
</style>
